<template>
  <span>
    <el-form
      ref="dynamicform"
      :model="form"
      size="mini"
      :hide-required-asterisk="formStyle.asterisk ? formStyle.asterisk : false"
      status-icon
      :rules="formStyle.rules ? formStyle.rules : {}"
      :inline="formStyle.inline ? formStyle.inline : false"
      :disabled="formStyle.disabled ? formStyle.disabled : false"
      :label-width="
        formStyle.labelWidth
          ? formStyle.labelWidth == 'auto'
            ? ''
            : formStyle.labelWidth
          : '20%'
      "
    >
      <el-form-item
        v-for="(item, index) in formStyle.formItems"
        :key="index"
        v-if="item.vIf ? dialog.title.includes(item.vIf) : true"
        style="font-size: 10px"
        :prop="item.prop"
        :label="
          (item.events && item.events.isShow ? item.events.isShow() : true)
            ? item.label
            : ''
        "
      >
        <!-- :rules="item.rules?item.rules:[]" -->
        <!-- 通用组件 -->
        <ComFormSpan :item="item" :form="form" :dialog="dialog"></ComFormSpan>
        <!-- 通用组件增加项 -->
        <ComFormSpanAdditional
          :item="item"
          :disabled="formStyle.disabled"
          :form="form"
        />
        <!-- 横向子表-->
        <SelectForm
          v-if="item.type == 'select-form'"
          :item="item"
          :form="form"
        />
        <!-- 列展示子表 -->
        <ChildTable
          v-if="item.type == 'child-form'"
          :disabled="formStyle.disabled"
          :item="item"
          :form="form"
        />
        <span v-if="item.type == 'slot-form'">
          <slot :name="item.prop" :item="item" :form="form"></slot>
        </span>
      </el-form-item>

      <el-form-item v-if="btns.length > 0">
        <Buttons :btns="btns"></Buttons>
      </el-form-item>
    </el-form>
  </span>
</template>
<script>
import Buttons from "./Buttons";
import ComFormSpan from "./ComFormSpan";

export default {
  props: {
    formDesign: {
      type: Object,
      default: () => {},
      required: true,
    },
    btns: {
      type: Array,
      default: () => [],
      required: false,
    },
    form: {
      type: Object,
      default: () => {},
      required: false,
    },
    dialog: {
      type: Object,
      default: () => {},
      required: false,
    },
  },
  data() {
    return {
      formStyle: {},
      // rules: {
      //   name: [
      //     { required: true, message: '角色名称12不能为空', trigger: 'change' },
      //     { validator: this.validateUserName, trigger: 'change' }
      //   ],
      //   description: [
      //     { required: true, message: 'description12不能为空', trigger: 'change' },

      //   ],
      // },
    };
  },
  watch: {
    form: {
      deep: true,
      immediate: true,
      handler: function (n, o) {
        this.$emit("update:form", this.form);
        this.formatForm()
      },
    },
    formDesign: {
      deep: true,
      immediate: true,
      handler: function (n, o) {
        this.formStyle = this.formDesign;
      },
    },
  },
  created: function () {
    this.formStyle = this.formDesign;
    console.log("this.formStyle", this.formStyle);
    console.log("弹框表单项this.dialog", this.dialog);
  },
  methods: {
    formatForm: function () {
      var items = this.formDesign.formItems;
      for (var i in items) {
        var item = items[i];
        if (item.prop && item.default) {
          this.form[item.prop] = item.default;
        }
        //自己加的下拉框接口请求数据
        if(item.type == 'select'&&item.params){
          item.params={roleId:69}
          // for(const val in item.params){
          //   item.params[val]=this.form[val]
          // } 
        }
      }
    },
    validateForm: function () {
      var result;
      this.$refs.dynamicform.validate((validate) => {
        result = validate;
      });
      return result;
    },
    resetForm() {
      this.$refs["dynamciform"].resetFields();
    },
    clear() {
      this.$nextTick(() => {
        this.$refs["dynamicform"].clearValidate();
      });
    },
    // validateUserName:(rule, value, callback) => {
    //   var reg = /^[0-9A-Za-z/]{1,32}$/ //8-16位且同时包含数字和字母
    //   if (value === '') {
    //     callback(new Error('请输入角色名称'))
    //   } else if (!reg.test(value)) {
    //     callback(new Error('角色名称由32位以内的数字、大小写字母组成!'))
    //   } else {
    //     callback()
    //   }
    // },
  },
};
</script>
<style scoped>
.el-select {
  width: 100%;
}
.el-form {
  font-size: 10px;
  border-radius: 3px;
  transition: 0.2s;
  padding: 10px;
}
.el-form-item_label {
  font-size: 7px;
}
.el-input__inner {
  display: block !important;
}
</style>
